import { globalStyle, style } from '@vanilla-extract/css';
import { vars, Z_INDEX } from '../global.css';

export const actionStyle = style({
	position: 'fixed',
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
	justifyContent: 'flex-end',
	left: 0,
	top: 0,
	bottom: 0,
	right: 0,
	width: '100vw',
	height: '100vh',
	zIndex: Z_INDEX.DIALOG,
	transition: 'opacity 0.3s',
	opacity: 0,
	touchAction: 'none',
	selectors: {
		'&.active': {
			opacity: 1,
		},
	},
});

globalStyle(`${actionStyle}.top`, {
	justifyContent: 'flex-start',
});

globalStyle(`${actionStyle}.left`, {
	flexDirection: 'row',
	justifyContent: 'flex-start',
});

globalStyle(`${actionStyle}.right`, {
	flexDirection: 'row',
	justifyContent: 'flex-end',
});

globalStyle(`${actionStyle}>div.panel`, {
	maxHeight: '80vh',
	maxWidth: '100vw',
	overflow: 'hidden',
	borderTopLeftRadius: vars.layout.largeRadius,
	borderTopRightRadius: vars.layout.largeRadius,
	backgroundColor: vars.color.baseBackground,
	transition: 'transform 0.3s',
	scrollbarWidth: 'none',
	transform: 'translateY(100%)',
	boxShadow: `1px 1px 10px ${vars.color.shadow}`,
	touchAction: 'none',
	outline: 'none',
});

globalStyle(`${actionStyle}.left>div.panel,${actionStyle}.right>div.panel`, {
	maxHeight: '100vh',
	maxWidth: '80vw',
});

globalStyle(`${actionStyle}.top>div.panel`, {
	transform: 'translateY(-100%)',
	borderTopLeftRadius: 0,
	borderTopRightRadius: 0,
	borderBottomLeftRadius: vars.layout.largeRadius,
	borderBottomRightRadius: vars.layout.largeRadius,
});

globalStyle(`${actionStyle}.left>div.panel`, {
	transform: 'translateX(-100%)',
	borderTopLeftRadius: 0,
	borderTopRightRadius: 0,
	borderBottomLeftRadius: 0,
	borderBottomRightRadius: 0,
});

globalStyle(`${actionStyle}.right>div.panel`, {
	transform: 'translateX(100%)',
	borderTopLeftRadius: 0,
	borderTopRightRadius: 0,
	borderBottomLeftRadius: 0,
	borderBottomRightRadius: 0,
});

globalStyle(`${actionStyle}>div.panel>div.content`, {
	padding: '1rem',
	overflow: 'scroll',
	scrollbarWidth: 'none',
	touchAction: 'none',
});

globalStyle(`${actionStyle}>div.panel>div.content::-webkit-scrollbar`, {
	width: 0,
});

globalStyle(`${actionStyle}>div.panel>div.button-bar`, {
	alignItems: 'center',
	borderBottom: `1px solid ${vars.color.border}`,
	height: '3.4em',
	display: 'none',
	padding: '0 0.2em',
});

globalStyle(`${actionStyle}>div.panel>div.button-bar>h4`, {
	flex: 1,
	textAlign: 'center',
	margin: '0',
	whiteSpace: 'nowrap',
	overflow: 'hidden',
	textOverflow: 'ellipsis',
});

globalStyle(`${actionStyle}>div.panel>div.button-bar.has-title,${actionStyle}>div.panel>div.button-bar.has-button`, {
	display: 'flex',
});

globalStyle(`${actionStyle}>div.panel>div.button-bar>button`, {
	border: 'none',
});

globalStyle(`${actionStyle}>div.panel::-webkit-scrollbar`, {
	width: 0,
	height: 0,
});

globalStyle(`${actionStyle}.active>div.panel`, {
	transform: 'translate(0)',
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
});

globalStyle(`${actionStyle}.no-h-padding>div.panel>div.content`, {
	paddingLeft: '0',
	paddingRight: '0',
});

globalStyle(`${actionStyle}.no-t-padding>div.panel>div.content`, {
	paddingTop: '0',
});

globalStyle(`${actionStyle}.no-b-padding>div.panel>div.content`, {
	paddingBottom: '0',
});

globalStyle(`${actionStyle}.no-v-padding>div.panel>div.content`, {
	paddingTop: '0',
	paddingBottom: '0',
});

globalStyle(`${actionStyle}.no-padding>div.panel>div.content`, {
	padding: '0',
});

globalStyle(`${actionStyle}.pre-covered>div.panel:after`, {
	content: ' ',
	display: 'block',
	position: 'absolute',
	transition: 'opacity 0.2s',
	backgroundColor: vars.color.mask,
	borderRadius: vars.layout.middleRadius,
	opacity: 0,
	left: 0,
	top: 0,
	right: 0,
	bottom: 0,
});

globalStyle(`${actionStyle}.pre-covered.covered>div.panel:after`, {
	opacity: 1,
});
